npm<template>
    <p>组合式api</p>
    <p>a:   {{ a }}</p>
    <p>name:   {{ name }}</p>

    <p>reactive====</p>
    <p>obj:{{ obj }}</p>
    <p>obj.name:{{ obj.name }}</p>
    <p>obj.age:{{ obj.age }}</p>

    <p>arr:{{ arr }}</p>
    <p>arr[0]:{{ arr[0] }}</p>

    <p>computed</p>
    <p>aAddFive:{{ aAddFive }}</p>
    <p>aAddFive:{{ objAgeAddFive }}</p>
    <button @click="aAddOne">a+1</button>
    <button @click="aAddTwo">a+2</button>

    <SonDemo foo="hello world" age="a"></SonDemo>





</template>

<script setup>
import { reactive, ref,computed,watch} from 'vue'
//引入子组件
import SonDemo from './SonDemo.vue'


const a = ref(0)
const name = ref('tom')


console.log(a);
console.log(a.value);

const testObj =ref({
    name:'tom',
    age:12
})

console.log(testObj.value.name);
const obj= reactive({
    name:'tom',
    age:12
})

console.log(obj.name);
const arr=reactive([1,2,3,4])

//computed
const aAddFive =computed(()=>{
    return a.value +5
})
const objAgeAddFive =computed(()=>{
    return obj.age+5
})

//watch
watch(a,(newVal,oldVal)=>{
    console.log('newVal',newVal);
    console.log('newVal',newVal);
})

//methods
function aAddOne(){
    a.value++
}

const aAddTwo= ()=>{
    a.value +=2
}
</script>